<template>
  <div class="header-box">
    <el-row type="flex" justify="space-between">
      <el-col :span="16" class="d-flex align-center">
        <button class="btn-tool" title="折叠" @click="collapse" >
            <i v-if="!isCollapse" class="el-icon-s-fold collapse-icon"></i>
            <i v-else class="el-icon-s-unfold collapse-icon"></i>
        </button>
        <el-breadcrumb separator="/" style="display: inline-block;margin-left:10px;">
          <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
          <transition-group name="breadcrumb">
          	<el-breadcrumb-item v-for=" (item,index) in breadcrumbVal" :key="index">{{item.title}}</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </el-col>
      <el-col :span="8" align="right" class="d-flex">

        <div class="header-user-con">
           <!-- 欢迎语 -->
        	<div class="welcomeBox">
        		欢迎 <span class="red">{{userName}}</span> 您登陆Megad管理系统
        	</div>
            <!-- 消息中心 -->
            <div class="btn-bell" v-show="message==0">
              <el-popover
                  placement="bottom"
                  title=""
                  width="200"
                  trigger="click"
                  content="暂无数据">
                   <i class="el-icon-message-solid informIcon" slot="reference"></i>
                </el-popover>
            </div>
           <!-- <div class="btn-bell" v-show="message!=0">
              <el-popover
                placement="bottom"
                width="400"
                trigger="click"
                v-model='showTaskPopover'
                @show="getTaskMsgFn">
                  <div style="font-size: 15px;font-weight: bold;padding-left:5px;padding-bottom: 2px;">任务提醒</div>
                  <div class="taskTable">
                    <div class='taskItem d-flex' v-for="item in taskMsgList" :title="'【'+item.title+'】'+item.content" @click="handleTaskDetail(item)">
                      <span class="taskTitle ellipsis-item" style="flex:1">【{{item.title}}】 {{item.content}}</span>
                      <span class="taskTime" style="width: 50px;text-align: center;">{{item.time}}</span>
                    </div>
                    <div style="text-align: center;cursor: pointer;" @click="handleGoTaskPage" v-if="taskMsgList.length=='5'">查看更多...</div>
                     <div style="text-align: center;"  v-if="taskMsgList.length=='0'">暂无数据</div>
                  </div>
                  <el-badge :value="message" class="item" slot="reference">
                    <i class="el-icon-message-solid informIcon"></i>
                  </el-badge>
              </el-popover>

            </div> -->
            <!-- 用户头像 -->
            <div class="user-avator d-flex" style="padding-left:15px;">
              <el-dropdown trigger="click" class="user-name" @command="handleCommand">
                 <span class="el-dropdown-link" style="cursor: pointer;">
                   <img src="@/assets/logo.png" />
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                   <el-dropdown-item command="logout">安全退出</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>

            </div>
        </div>

      </el-col>
    </el-row>


  </div>
</template>

<script>

 import { getButtonJurisdictionInfo, getTaskList, getNoticeCount,logout } from '@/api/getData';
export default {
  inject: ['reload'],
  data () {
    return {
      isCollapse: false,
      dialogVisible: false,
      showTaskPopover:false,
      breadcrumbVal:[],//加载历史页面名称面包屑
      message:0,
      scrollLeft: 5,
      menuList:[],
      userName:'',
      taskMsgList: []//任务提醒列表
    }
  },
  mounted(){
    this.menuList = JSON.parse(this.$store.state.menuList);
    this.userName =  localStorage.getItem('bossAppUserName');
    this.getHistoryPageNameFn();
    this.getRouteFn();
    //this.getNoticeCountFn();

    /*监听更新未读消息个数*/
    this.$EventBus.$on('getNoticeCountBus', ()=>{
        this.getNoticeCountFn();
    })
  },
  methods: {
     /** 去单个任务详情地址 **/
    handleTaskDetail(row){
      this.showTaskPopover = false;
      let type = row.type;
      if(type=='1'){//实名认证审核
        this.$router.push({path:'/audit/nameAttestationAudit'});
      }else if(type=='2'){//用户加盟审核
        this.$router.push({path:'/audit/joinApplyMsg?customerUnionId='+row.relationId});
      }else if(type=='3'){//门店入驻审核
        this.$router.push({path:'/user/applyStore?storeId='+row.relationId+'&type=detail&customerId='+row.relationId+'&entrance=audit'});
      }
    },
    /** 获取消息个数 **/
    async getNoticeCountFn(){
      try {
        const result = await getNoticeCount();
        this.message = result.data;
      } catch (err) {
        console.log(err)
      }
    },
    /** 去任务提醒页面 **/
    handleGoTaskPage(){
      this.showTaskPopover = false;
      this.$router.push({path:'/msg/taskManager?readStatus=1'})
    },
    /** 点击右上角小铃铛获取任务列表 **/
    async getTaskMsgFn(){
      try {
        let data = {
          readStatus:1,
          pageNum:1,
          pageSize:5,
        }
         const result = await getTaskList(data);
         if (result.code == 200) {
           this.taskMsgList = result.rows;
           let data = result.rows;
           data.map(item=>{
             if(item.insertDate){
               item.time = (this.parseTime(item.insertDate)).substr(5,5)
             }else{
                item.time = ''
             }
           })
         } else {
           this.$message.error(result.msg);
         }
      } catch (err) {
        console.log(err)
      }
    },
    /** 获取路由等用户资料信息 **/
    async getRouteFn() {
      try {
        const result = await getButtonJurisdictionInfo();
        if (result.code == 200) {
            this.$store.commit('setBtnPermissions',JSON.stringify(result.permissions));
            this.message = result.noticeCount;
        } else {
          this.$message.error(result.msg);
        }
      } catch (err) {
        console.log(err)
      }
    },
    /**获取历史页面名称**/
    getHistoryPageNameFn(){
      let that = this;
      that.breadcrumbVal = [];
      const userRouteList = this.menuList;
      let thisRoutePath = this.$route.matched.length?this.$route.matched[1].path:'';
      for(let i=0;i<userRouteList.length;i++){
      	if(userRouteList[i].children){
      		for(let a = 0;a<userRouteList[i].children.length;a++){
      			if(userRouteList[i].children[a].index == thisRoutePath){
              setTimeout(()=>{that.breadcrumbVal = [{title:userRouteList[i].meta.title},{title:userRouteList[i].children[a].meta.title}];},100)
      			}
      		}
      	}
      }
    },
    collapse () {
        this.$store.commit('switchCollapse');
        this.isCollapse = !this.isCollapse;
    },
    refresh () {
      this.reload()
    },
    handleCommand (command) {
      switch (command) {
        case 'logout':
        logout().then(res=>{})
          this.$router.replace({ path: '/login' })
          break
        case 'profile':
          this.$router.replace({ path: '/user/profile' })
      }
    },


  },
  computed: {
    username () {
      let { username } = JSON.parse(sessionStorage.getItem('user'))
      return username.toUpperCase()
    },
    tabs() {
      return this.$store.state.tabs
    }
  },
  watch:{
    	"$route":"getHistoryPageNameFn"
  }
}
</script>

<style lang="scss" scoped>
  .taskItem{
    cursor: pointer;
    padding:4px 0;
  }
  .header-user-con /deep/ .el-badge__content.is-fixed {
      position: absolute;
      top: 19px;
      right: 29px;
      line-height: 16px!important;
      -webkit-transform: translateY(-50%) translateX(100%);
      transform: translateY(-50%) translateX(100%);
  }
  .welcomeBox{
    font-size: 14px;
    color:#333;
  }
  .informIcon{
    font-size:28px;
    color:#61997A;
    margin:0 18px;
    transform: translateY(6px);
  }
  .header-user-con{
    display: flex;
    height: 60px;
    align-items: center;
    margin-left:auto;
  }
  .user-avator img{
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
  }
  .btn-bell, .btn-fullscreen{
      position: relative;
      text-align: center;
      border-radius: 15px;
      cursor: pointer;
  }
  .btn-tool {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    outline: none;
    text-align: left;
    padding:0px;
    .collapse-icon{
      font-size: 24px;
      color:#FC5173;
    }
  }
  .user-name {
    // margin-left: 20px;
  }
  .header-box /deep/ .el-breadcrumb__inner{
    color:#97a8be!important;
  }
  .header-box /deep/ .el-breadcrumb__inner.is-link{
    color:#333!important;
  }
</style>
